<style>
#setQuantity.ng-dirty {
  background: none !important;
}
#opplan-attributes-drvtable tbody tr td {
    border: 0px;
    vertical-align: middle;
}
#opplan-attributes-drvtable thead tr td {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #bbb;
}
</style>
<div class="panel-heading">
  <h4 class="panel-title">
  <span data-ng-if="operationplan.type" style="text-transform: capitalize">{{ opptype[operationplan.type] }}</span>
  <span data-ng-if="!operationplan.id" style="text-transform: capitalize">{{ 'no selection'|translate }}</span>
  <span data-ng-if="operationplan.id == -1" style="text-transform: capitalize">{{ 'selected' | translate }}&nbsp;{{ operationplan.count }}</span>
  </h4>
</div>
<table class="table table-condensed table-hover" id="opplan-attributes-drvtable">
  <thead data-ng-if="operationplan.operation.name || operationplan.name">
    <tr>
      <td style="min-width: 250px; width:30%">
        <b id="thead1" style="text-transform: capitalize">{{ 'name'|translate }}&nbsp;</b>
      </td>
      <td>
        <b style="text-transform: capitalize" data-ng-if="operationplan.hasOwnProperty('operation')">{{operationplan.operation.name}}
        <a href="/detail/input/operation/key/" role="input/operation" onclick="opendetail(event)">
           <span class="fa fa-caret-right"></span>
        </a>
        </b>
        <b style="text-transform: capitalize" data-ng-if="!operationplan.hasOwnProperty('operation')">{{operationplan.name}}
        <a href="/detail/input/operation/key/" role="input/operation" onclick="opendetail(event)">
           <span class="fa fa-caret-right"></span>
        </a>
        </b>
      </td>
    </tr>
  </thead>
  <tbody data-ng-if="operationplan.id">
    <tr data-ng-if="operationplan.id !== -1 && operationplan.type !== 'STCK'">
      <td><b style="text-transform: capitalize">{{'reference'|translate}}</b></td>
      <td id="referencerow">{{operationplan.reference}}</td>
    </tr>
    <tr data-ng-if="operationplan.owner !== null && operationplan.id !== -1">
      <td><b style="text-transform: capitalize">{{'owner'|translate}}</b></td>
      <td id="ownerrow">{{operationplan.owner}}
        <a href="/detail/input/manufacturingorder/key/" role="input/manufacturingorder" onclick="opendetail(event)">
           <span class="fa fa-caret-right"></span>
        </a>
      </td>
    </tr>
    <tr data-ng-if="operationplan.item !== null && operationplan.id !== -1">
      <td><b style="text-transform: capitalize" translate>item</b></td>
      <td id="itemrow">{{operationplan.item}}
        <a href="/detail/input/item/key/" role="input/item" onclick="opendetail(event)">
           <span class="fa fa-caret-right"></span>
        </a>
      </td>
    </tr>
    <tr ng-if="operationplan.supplier !== null && operationplan.id !== undefined && operationplan.id !== -1">
      <td><b style="text-transform: capitalize">{{'supplier'|translate}}</b></td>
      <td id="supplierrow">{{operationplan.supplier}}
        <a href="/detail/input/supplier/key/" role="input/supplier" onclick="opendetail(event)">
           <span class="fa fa-caret-right"></span>
        </a>
      </td>
    </tr>
    <tr ng-if="operationplan.location !== null && operationplan.id !== -1">
      <td><b style="text-transform: capitalize">{{'location'|translate}}</b></td>
      <td id="locationrow">{{operationplan.location}}
        <a href="/detail/input/location/key/" role="input/location" onclick="opendetail(event)">
           <span class="fa fa-caret-right"></span>
        </a>
      </td>
    </tr>
    <tr ng-if="operationplan.origin !== null && operationplan.id !== undefined && operationplan.id !== -1">
      <td><b style="text-transform: capitalize">{{'origin'|translate}}</b></td>
      <td id="originrow">{{operationplan.origin}}
        <a href="/detail/input/location/key/" role="input/location" onclick="opendetail(event)">
           <span class="fa fa-caret-right"></span>
        </a>
      </td>
    </tr>
    <tr ng-if="operationplan.destination !== null && operationplan.id !== undefined && operationplan.id !== -1">
      <td>
      <b data-ng-if="operationplan.type !== 'STCK'" style="text-transform: capitalize;">{{'destination'|translate}}</b>
      <b data-ng-if="operationplan.type === 'STCK'" style="text-transform: capitalize;">{{'location'|translate}}</b>
      </td>
      <td id="destinationrow">{{operationplan.destination}}
        <a href="/detail/input/location/key/" role="input/location" onclick="opendetail(event)">
           <span class="fa fa-caret-right"></span>
        </a>
      </td>
    </tr>
    <tr data-ng-if="operationplan.type !== 'STCK'">
      <td><b style="text-transform: capitalize" data-ng-if="operationplan.type == 'MO'">{{'start date'|translate}}</b>
        <b style="text-transform: capitalize" data-ng-if="operationplan.type == 'PO'">{{'ordering date'|translate}}</b>
        <b style="text-transform: capitalize" data-ng-if="operationplan.type == 'DO'">{{'shipping date'|translate}}</b>
        <b style="text-transform: capitalize" data-ng-if="operationplan.colmodel.startdate">{{operationplan.colmodel.startdate.label|translate}}</b>
        <b style="text-transform: capitalize" data-ng-if="operationplan.colmodel.operationplan__startdate">{{operationplan.colmodel.operationplan__startdate.label|translate}}</b>&nbsp;
        <small data-ng-if="operationplan.colmodel.startdate">({{ operationplan.colmodel.startdate.type|translate }})</small>
        <small data-ng-if="operationplan.colmodel.operationplan__startdate">({{ operationplan.colmodel.operationplan__startdate.type|translate }})</small>
      </td>
      <td id="startrow">
        <input id="setStart" type="text" size="9" class="vDateField form-control" value="{{operationplan.start|formatdate}}" disabled>
      </td>
    </tr>
    <tr data-ng-if="operationplan.setupend">
      <td><b style="text-transform: capitalize">{{'setup end date'|translate}}</b></td>
      <td>
        <input type="text" size="9" class="vDateField form-control" value="{{operationplan.setupend|formatdate}}" disabled>
      </td>
    </tr>    
    <tr data-ng-if="operationplan.type !== 'STCK'">
      <td><b style="text-transform: capitalize;" ng-if="operationplan.type == 'MO'">{{'end date'|translate}}</b>
        <b style="text-transform: capitalize;" ng-if="operationplan.type == 'PO'">{{'receipt date'|translate}}</b>
        <b style="text-transform: capitalize;" ng-if="operationplan.type == 'DO'">{{'receipt date'|translate}}</b>
        <b style="text-transform: capitalize" ng-if="operationplan.colmodel.enddate">{{operationplan.colmodel.enddate.label|translate}}</b>
        <b style="text-transform: capitalize" ng-if="operationplan.colmodel.operationplan__enddate">{{operationplan.colmodel.operationplan__enddate.label|translate}}</b>&nbsp;
        <small data-ng-if="operationplan.colmodel.enddate">({{ operationplan.colmodel.enddate.type|translate }})</small>
        <small data-ng-if="operationplan.colmodel.operationplan__enddate">({{ operationplan.colmodel.operationplan__enddate.type|translate }})</small>
      </td>
      <td id="endrow">
        <input id="setEnd" type="text" size="9" class="vDateField form-control" value="{{operationplan.end|formatdate}}" disabled>
      </td>
    </tr>
    <tr>
      <td><b style="text-transform: capitalize;">{{'quantity'|translate}}</b>&nbsp;
        <small data-ng-if="operationplan.colmodel.quantity">({{ operationplan.colmodel.quantity.type|translate }})</small>
      </td>
      <td id="quantityrow">
        <input id="setQuantity" class="form-control" type="number" ng-model="operationplan.quantity" ng-model-options="{debounce: 300}" disabled>
      </td>
    </tr>
    <tr data-ng-if="operationplan.type !== 'STCK'">
      <td><b style="text-transform: capitalize;">{{'criticality'|translate}}</b>&nbsp;
        <small data-ng-if="operationplan.colmodel.criticality">({{ operationplan.colmodel.criticality.type|translate }})</small>
        <small data-ng-if="operationplan.colmodel.operationplan__criticality">({{ operationplan.colmodel.operationplan__criticality.type|translate }})</small>
      </td>
      <td id="criticalityrow">{{operationplan.criticality | number:0}}</td>
    </tr>
    <tr data-ng-if="operationplan.type !== 'STCK'">
      <td><b style="text-transform: capitalize;">{{'delay'|translate}}</b>&nbsp;
        <small data-ng-if="operationplan.colmodel.delay">({{ operationplan.colmodel.delay.type|translate }})</small>
        <small data-ng-if="operationplan.colmodel.operationplan__delay">({{ operationplan.colmodel.operationplan.colmodel.operationplan__delay.type|translate }})</small>
      </td>
      <td id="delayrow">{{(operationplan.delay / 86400)|number:0}}</td>
    </tr>
    <tr data-ng-repeat="(key, value) in operationplan.colmodel"
      data-ng-if="['delay', 'criticality', 'quantity', 'startdate', 'enddate', 'color'].indexOf(key) == -1">
      <td><b style="text-transform: capitalize;">{{value.label|translate}}</b>&nbsp;
        <small>({{ value.type|translate }})</small>
      </td>
      <td>{{(operationplan[key])|number:0}}</td>
    </tr>
    <tr id="statusrow" data-ng-if="operationplan.type !== 'STCK'">
      <td><b style="text-transform: capitalize;">{{'status'|translate}}</b></td>
      <td>
        <div class="btn-group" role="group">
          <button id="proposedBtn" data-ng-if="actions.hasOwnProperty('proposed')" type="button" class="btn btn-primary" ng-click="operationplan.status = 'proposed'" style="text-transform: capitalize;" disabled="disabled">{{'proposed'|translate}}</button>
          <button id="approvedBtn" data-ng-if="actions.hasOwnProperty('approved')" type="button" class="btn btn-primary" ng-click="operationplan.status = 'approved'" style="text-transform: capitalize;" disabled="disabled">{{'approved'|translate}}</button>
          <button id="confirmedBtn" data-ng-if="actions.hasOwnProperty('confirmed')" type="button" class="btn btn-primary" ng-click="operationplan.status = 'confirmed'" style="text-transform: capitalize;" disabled="disabled">{{'confirmed'|translate}}</button>
          <button id="completedBtn" data-ng-if="actions.hasOwnProperty('completed')" type="button" class="btn btn-primary" ng-click="operationplan.status = 'completed'" style="text-transform: capitalize;" disabled="disabled">{{'completed'|translate}}</button>
          <button id="closedBtn" data-ng-if="actions.hasOwnProperty('closed')" type="button" class="btn btn-primary" ng-click="operationplan.status = 'closed'" style="text-transform: capitalize;" disabled="disabled">{{'closed'|translate}}</button>
          <button id="erp_incr_exportBtn" data-ng-if="actions.hasOwnProperty('erp_incr_export') && operationplan.status == 'proposed'" type="button" class="btn btn-primary" ng-click="actions['erp_incr_export']()" style="text-transform: capitalize;" disabled="disabled">{{'export'|translate}}</button>
        </div>
      </td>
    </tr>
  </tbody>
</table>
